<!-- 我的 活动 -->
<template>
  <div class="myact-container">
      <div class="actrow" v-for="(rows,index) in actrows" :key="index">
        <!-- 每一张图片区域 -->
        <div class="actInfo" v-for="(act,index) in rows" :key="index">
          <!-- 图片 -->
          <div class="act-box">
            <router-link :to="{name: 'actinfo'}">
              <el-card shadow="always" :body-style="{ padding: '0px' }">
                <div class="card" style=" height:280px; width: 400px;">
                  <act-card></act-card>
                </div>
              </el-card>
            </router-link>
          </div>
        </div>
      </div>
       <div class="more" style="text-align:center;margin-top:50px;">
 <el-button type="info">加载更多</el-button>
      </div>
  </div>
</template>

<script>
import ActCard from "@/subcomponents/actCard.vue";
export default {
  data () {
    return {
      actLists: [
        {
          id: 1
        },
        {
          id: 2
        },

        {
          id: 3
        },

        {
          id: 4
        },

        {
          id: 5
        },
        {
          id: 6
        }
      ],
      actrows: []
    };
  },
  components: {
    ActCard,

  },
mounted: function() {
 
    this.changeAct();
  },
  methods: {
    changeAct() {
      var rowNum = parseInt(Math.ceil(this.actLists.length / 3));
      var n = 0;
      for (var i = 0; i < rowNum; i++) {
        var rows = [];
        n = i * 3;
        for (var j = n; j < n + 3; j++) {
          rows.push(this.actLists[j]);
        }
        this.actrows.push(rows);
      }
      return;
    }
  }
}

</script>
<style lang='scss' scoped>
.myact-container{
  margin: 50px 100px;
    
    span {
      font-size: 16px;
      letter-spacing: 1.5px;
    }
    .actrow {
      display: flex;
      justify-content: space-between;
      margin: 50px 10px 0 10px;
    }
}
</style>